<!doctype html>
<html lang="en">
<head>
    <title>Data Surveyor</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">

    <!-- Optional theme -->
    <link href="https://cdn.bootcss.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet">

    <!-- Font Awesome -->
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <link href="https://cdn.bootcss.com/layer/3.1.0/theme/default/layer.css" rel="stylesheet">

    <style>
        body{font-family:'microsoft yahei'}
        .line1{height:1px;margin:15px auto;transform:scaleY(.2);-webkit-transform:scaleY(.2);background-color:#ccc}
        .wrap{padding:0 15px}
        .header .row .col-sm-3.col-xs-5,.header .row .col-sm-3.col-xs-7,.header .row .col-sm-6.col-xs-12{margin-top:15px}
        .listcontent{overflow-x:auto}
        .listcontent .showimg{width:50px;height:50px;    background-color: #eee; border-radius:5px;border:2px solid #fff;background-repeat: no-repeat;background-position: center center; background-size: cover;}
        .add{position:fixed;right:15px;bottom:15px;z-index:2;width:45px;height:45px;border-radius:50%;box-shadow:0 0 15px #ccc;text-align:center;line-height:45px;background:rgba(255,255,255,.5);color:#666}
        .add a{text-decoration:none}
    </style>


</head>
<body>
<div class="add">
    <a href="./add.html" class="fa fa-plus"></a>
</div>
<div class="wrap">
<!-- 头部筛选 -->
<div class="header">

    <div class="container-fluid">
        
        <div class="row">

          <div class="col-sm-6 col-xs-12">
            <div class="input-group">

              <span class="input-group-addon">从</span>

              <input type="text"  name="start_time" id="start_time" class="form-control" readonly="true"   aria-label="..." placeHolder="请选择开始时间">

              <span class="input-group-addon">到</span>

              <input type="text" name="end_time" id="end_time" class="form-control" readonly="true"   aria-label="..." placeHolder="请选择截止时间">
          </div><!-- /.col-lg-6 -->
         </div>

          <div class="col-sm-3 col-xs-5">

              <select class="form-control" name="searchtype" id="searchtype" >
                  <option value ="" selected>选择搜索项目</option>
                  <option value ="surveyor" >姓名</option>
                  <option value ="tool">工具</option>
                  <option value="thing">物件</option>
            </select>
        </div>

          <div class="col-sm-3 col-xs-7">
            <div class="input-group">
              <input type="text" class="form-control" aria-label="..." placeHolder="请输入搜索关键字" name="keyword" id="keyword">
              <span class="input-group-addon text-primary" id="gosearch"><i class="fa fa-search"></i></span>
            </div><!-- /input-group -->
          </div><!-- /.col-lg-6 -->

        </div>

    </div>

</div>

<div class="line1"></div>

<div class="listcontent">


    <table class="table table-striped table-hover table-responsive">
      <thead>

        <tr class="active">
          <th>#</th>
          <th>姓名</th>
          <th>工具</th>
          <th>物件</th>
          <th>数值</th>
          <th>图片</th>
          <th>时间</th>
        </tr>

      </thead>
      <tbody>


        <tr class="">
          <th scope="row">1</th>
          <td>Column content</td>
          <td>Column content</td>
          <td>Column content</td>
          <td>Column content</td>
          <td>
              <div class="showimg" data-src="https://place-hold.it/100x300/666/fff/000" style="background-image:url('https://place-hold.it/100x300/666/fff/000')"></div>
          </td>
          <td>Column content</td>
        </tr>


        <tr>
          <th scope="row">2</th>
          <td>Column content</td>
          <td>Column content</td>
          <td>Column content</td>
          <td>Column content</td>
          <td>
              <div class="showimg" data-src="https://place-hold.it/300x300/666/fff/000" style="background-image:url('https://place-hold.it/300x300/666/fff/000')"></div>
          </td>
          <td>Column content</td>
        </tr>


        <tr class="">
          <th scope="row">3</th>
          <td>Column content</td>
          <td>Column content</td>
          <td>Column content</td>
          <td>Column content</td>
          <td>
              <div class="showimg" data-src="https://place-hold.it/900x300/666/fff/000" style="background-image:url('https://place-hold.it/900x300/666/fff/000')"></div>
          </td>
          <td>Column content</td>
        </tr>

      </tbody>
    </table>
</div>

<div class="footer">
    <nav aria-label="Page navigation">
      <ul class="pagination ">
        <li class="disabled">
          <a href="#" aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
          </a>
        </li>
        <li class="active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li>
          <a href="#" aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
          </a>
        </li>
      </ul>
    </nav>

</div>

</div>


</body>

<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>

<script src="https://cdn.bootcss.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<script src="https://cdn.bootcss.com/layer/3.1.0/layer.js"></script>

<script src="./laydate/laydate.js"></script>

<script type="text/javascript">

$(document).ready(function(){
    //初始化时间控件

    laydate.render({
        elem: '#end_time',
        min: '2018-01-01',
        type: 'datetime',
        calendar: true ,
        change: function(value, date){//ready,done
            //layer.msg('你选择的日期是' + value + '<br><br>获得的对象是' + JSON.stringify(date));
        }
    });

    laydate.render({
        elem: '#start_time',
        min: '2018-01-01',
        type: 'datetime',
        calendar: true ,
        change: function(value, date){//ready,done
            //layer.msg('你选择的日期是' + value + '<br><br>获得的对象是' + JSON.stringify(date));
        }
    });


    // 搜索
    $('#gosearch').on('click',function(){
        refreshlist();
    })


    var refreshlist =  function(){

        var start_time =  $('#start_time').val()? new Date($('#start_time').val().replace(/-/g,'/')).getTime()/1000:'';
        var end_time =  $('#end_time').val()? new Date($('#end_time').val().replace(/-/g,'/')).getTime()/1000:'';
        var searchtype = $('#searchtype').val();
        var keyword = $.trim($('#keyword').val());

        if(start_time.length+end_time.length+searchtype.length+keyword.length==0) {layer.msg('请输入搜索条件');return;};

        var url = '?start_time='+start_time+'&end_time='+end_time+'&searchtype='+searchtype+'&keyword='+keyword;

        layer.msg(url);
        return;

        window.location.href=url;


    }



    //查看图片大图 
    $('.showimg').on('click',function(){

        var that = $(this);
        var url = that.data('src');

        // layer.msg('<img src="'+url+'">');

        layer.open({
            type: 2,
            title: '图片',
            shadeClose: true,
            shade: 0.8,
            area: ['90%', '90%'],
            // content: '<img src="'+url+'">',
            content: url,
            cancel:function(){
            
            }
        });   
    })
})


</script>

</html>